<template>
    <div class="view">
        <android-nav-bar title="系统通知" v-on:back="back"></android-nav-bar>
        <div class="none-message" v-if="!messageList.length">
            暂无公告!
        </div>
        <cube-scroll class="list-scroll" ref="scroll" :scroll-events="['scroll']"
                     :data="messageList"
                     :options="options"
                     @pulling-down="onPullingDown"
                     @pulling-up="onPullingUp"
                     v-if="messageList.length">
            <div class="item flex" v-for="(value,index) in messageList" @click="toPage('messageDetail',{id:value.message.id,viewId:value.view_id})">
                <div class="icon-box">
                    <span class="iconfont icon-gonggao1"></span>
                    <span v-if="value.view_status==0" class="iconfont icon-weidu view-status"></span>
                </div>
                <div class="content">
                    <div class="title ellipsis">{{value.message.title}}</div>
                    <div class="time">
                        {{value.message.create_time | timeStamp}}
                    </div>
                </div>
            </div>
        </cube-scroll>
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";
    import Badge from "@/components/aui/Badge.vue";
    import AndroidNavBar from "@/components/aui/AndroidNavBar.vue";
    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import DialogConfig from "@/constant/DialogConfig";
    import {updateDataCache} from "@/store/dispatches";

    @Component({
        components: {
            Badge,
            AndroidNavBar
        },
    })
    export default class ChatList extends Scene {
        private page: number=1;
        private messageList: any[] = [];

        @State("UserStore")
        public user!: InterfaceUser;

        private get options(): any {
            return {
                pullDownRefresh: {txt: "更新成功"},
                pullUpLoad: {
                    threshold: 0,
                    txt: {more: "", noMore: "没有更多数据了..."},
                    visible: true
                },
                scrollbar: true
            };
        }

        private onPullingDown(): void {
            (this as any).$refs.scroll.forceUpdate();
        }

        private onPullingUp(): void {
            Http.get(this.api.getMessageList, {page: this.page, size: 15}, {token: this.user.token}).then((res) => {
                if (res.code == 1) {
                    if (res.data.data !== []) {
                        this.messageList = this.messageList.concat(res.data.data);
                        this.$nextTick(() => {
                            (this as any).$refs.scroll.refresh();
                            (this as any).$refs.scroll.forceUpdate();
                        });
                        this.page++;
                    } else if (res.data.data == []) {
                        (this as any).$refs.scroll.forceUpdate();
                    }
                }
            });
        }

        private getmessageList(): void {
            let loadToast = (<any> this).$createToast({
                time: 0,
                type: "loading",
                mask: true,
                txt: "加载中..."
            }).show();
            Http.get(this.api.getMessageList, {page:this.page,size:12}, {token: this.user.token}).then((res) => {
                if (res.code === 1) {
                    loadToast.hide();
                    this.messageList.push(...res.data.data);
                    this.page++;
                }else {
                    loadToast.hide();
                    this.globalSingleResultToast(res);
                }
            }).catch((res) => {
                loadToast.hide();
                console.log(res);
                (<any> this).$createToast({
                    time: 2500,
                    type: "error",
                    txt: "网络繁忙,暂无信息!",
                    mask: true,
                    onTimeout: () => {
                        this.navigateBack();
                    }
                }).show();
            });
        }

        private back(): void {
            this.navigateBack();
        }

        private mounted() {
            this.getmessageList();
        }

        private toPage(name: string, query: any = {}): any {
            this.navigateTo({
                name: name,
                query: query
            });
        }
    }
</script>

<style scoped lang="stylus">
    .view
        position relative;
        width 100vw;
        height 100vh;
        background #fff;
        overflow hidden;

        .none-message
            height 100px;
            line-height 100px;
            text-align center;
            color $theme-viceColor-font;
            margin-top calc(var(--safe-area-inset-top) + 47px);

        .list-scroll
            margin-top calc(var(--safe-area-inset-top) + 47px);
            height calc(100vh - 47px - var(--safe-area-inset-top));
            width 100vw;
            padding-bottom calc(15px + var(--safe-area-inset-bottom));

            .item
                padding 10px 15px;
                border-bottom 1px solid $theme-line-color;
                justify-content: space-between;
                align-items center;

                .icon-box
                    width 60px;
                    height 60px;
                    line-height 60px;
                    text-align center;
                    position relative;
                    background-color #E2BC45;
                    border-radius 50%;
                    .icon-gonggao1
                        font-size 26px;
                        color #fff;
                    .icon-weidu
                        position: absolute;
                        top -12px;
                        right 4px;
                        color #FF4D4D;
                        font-size 26px;
                .content
                    width calc(100vw - 30px - 70px);
                    height 60px;
                    >div
                        line-height 30px;


</style>
